<%@ page import="com.feng.ALittleFlower.Database" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.feng.ALittleFlower.Comment" %>
<%@ page import="java.util.Random" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<%
    if (session.getAttribute("username") == null) {
        response.sendRedirect("./notavailable.jsp");
    }
%>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="./css/bootstrap.css" rel="stylesheet">
    <link href="read.css" rel="stylesheet">
    <title>观看影评</title>
</head>

<body class="bg d-flex">
<%@include file="navbar.jsp" %>
<div class="container my-5 py-5">
    <div class="row">
        <div class="col-12 text-end">
            <div class="col-12 ">
                <button class="btn disabled btn-lg btn-outline-primary" disabled>观看影评</button>
                <a href="publish.jsp"><button class="btn btn-lg btn-primary">发布影评</button></a>
                <hr class="mx-auto">
            </div>
        </div>
    </div>

    <div class="row" data-masonry='{"percentPosition": true }'  style="position: relative;">
        <%
            ArrayList<Comment> comments = null;
            String[] styleClasses = {"text-white bg-primary", "text-white bg-secondary",
                    "text-white bg-success", "text-white bg-danger", "text-dark bg-warning",
            "text-dark bg-info", "text-dark bg-light", "text-white bg-dark"};
            Random r = new Random();
            try {
                comments = Database.getComments();
            } catch (Exception e) {
                e.printStackTrace();
            }
            if (comments != null) {
                for (Comment comment : comments) {
                    out.println("<div class=\"col-lg-3 col-md-4 col-sm-6 col-xs-12 g-5\">\n" +
                            "            <div class=\"card " + styleClasses[r.nextInt(styleClasses.length)] + " mb-3\">\n" +
                            "                <div class=\"card-header\">" + comment.getUsername() + "</div>\n" +
                            "                <div class=\"card-body\">\n" +
                            "                    <h3 class=\"card-title\">评分：" + comment.getRate() + "</h3>\n" +
                            "                    <p class=\"card-text\">" + comment.getContent() + "</p>\n" +
                            "                </div>\n" +
                            "            </div>\n" +
                            "        </div>");
                }
            }

        %>

    </div>
</div>


<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
</body>

</html>